/**
 h5:物理1px适配
 7、伪类 + transform 实现
 所有场景都能满足
 支持圆角(伪类和本体类都需要加border-radius)
 案例
 <div class="hairline hairline--round">hairline</div>
*/
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
    .hairline {
        position: relative;
        border:none;
    }
    .hairline:after {
        content: '';
        /* 放大 */
        position: absolute;
        top: -50%;
        bottom: -50%;
        left: -50%;
        right: -50%;
    
        /* 缩小 */
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    
        /* 边框 */
        border-width: 0;
        border-style: solid;
    
        /* 不遮挡 */
        pointer-events: none;
    }
    /* 全边框 */
    .hairline--round:after {
        border-width: 1px;
        /* no */
    }
    
}

/* 单边框 */
.hairline--top:after {
    border-top-width: 1px;
    /* no */
}

.hairline--right:after {
    border-right-width: 1px;
    /* no */
}

.hairline--bottom:after {
    border-bottom-width: 1px;
    /* no */
}

.hairline--left:after {
    border-left-width: 1px;
    /* no */
}

/* 输入框 */
// .hairline--input input,
// .hairline--input textarea ,
// .hairline--input select{
//     display: block;
//     width: 100%;
//     height: 100%;
//     padding: 0;
//     border: none;
//     border-radius: inherit;
//     -webkit-box-sizing: border-box;
//     box-sizing: border-box;
// }
